.toc-wrapper {
  @extend .position-fixed;
  z-index: 9998;
  @extend .top_0;
  @extend .left_0;
  left: 30%;
  @extend .bottom_0;
  @extend .display-table;
  table-layout: fixed;
  width: 30%;
  @extend .margin_0;
  background-color: rgba(0,0,0,.6);
  transition: all ease .5s;
}
.toc-wrapper:hover {
  left: 30%;
}
.toc-wrapper::after {
  content: "\e61a";
  @extend .position-absolute;
  @extend .top_50pct;
  right: -30px;
  width: 30px;
  height: 40px;
  margin-top: -20px;
  font-family: "iconfont";
  @extend .text-align-center;
  line-height: 38px;
  @extend .color-fff;
  background-color: rgba(0,0,0,.6);
  border: 0 none;
  @extend .cursor-pointer;
}
.toc {
  @extend .display-tableCell;
  @extend .vertical-align-middle;
  width: 100%;
  padding: 0 1em;
  @extend .overflow-hidden;
  @extend .list-style-none;
}
.toc-child {
  padding-left: 1em;
  @extend .list-style-none;
}
.toc-link {
  @extend .display-inlineBlock;
  margin: .1em 0;
  padding-left: .4em;
  @extend .text-decoration-none;
  @extend .color-fff;
  border-left: 2px solid $color-fff;
  transition: all ease .2s;
}
.toc-link:hover {
  padding-left: 1em;
  @extend .text-decoration-underline;
}
